<template>
	<div class="ele-body">
		<div class="daohang">
			<div class="title">用户管理</div>
		</div>
		<div style="padding: 20px;background-color:  #fff;" class="top-con">
			
				<el-row style="width: 100%;">
			
					<el-col :span="5" style="display: flex;align-items: center;">
						<span style="font-weight: 600;margin-right: 10px;width:60px;">	用户名:</span><el-input v-model.number="username" placeholder="请输入姓名搜索" style="width: 160px;"></el-input>
					</el-col >
					<el-col :span="5" style="display: flex;align-items: center;">
						<span style="font-weight: 600;margin-right: 10px;width:50px;">	姓名:</span><el-input v-model.number="nickname" placeholder="请输入姓名搜索" style="width: 160px;"></el-input>
					</el-col >
			
					<el-col :span="6" style="display: flex;align-items: center;">
						<span style="font-weight: 600;margin-right: 10px;width:70px;">	用户角色:</span>
							 <el-select v-model="group_id" placeholder="请选择"   style="width: 160px;" clearable>
							    <el-option
							      v-for="item in jueselist"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id"
								 
								  >
							    </el-option>
							  </el-select>
					</el-col >
					<el-col :span="2">
							<el-button type="warning" @click="search">搜索</el-button>
					</el-col>
							
				</el-row>
			
		</div>
		<div class="top-btn">
			<div class="top-con">
				<div class="con-item">
					<el-button type="success" @click="add()">添加</el-button>
				</div>
			</div>
			<div class="top-con">

				
			</div>
		</div>

		<el-drawer :show-close="true" size="280px" title="表格字段" :visible.sync="drawer">
			<div>
				<rightbiao :ziduanlist='ziduanlist' @xuanzebiao="xuanzebiao($event)"></rightbiao>
			</div>
		</el-drawer>
		<div style="margin-top: 30px;" v-if="tableData">
			<el-table :data="tableData.data" stripe style="width: 100%"
				:header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" border>
				<el-table-column prop="id" label="ID"
					min-width="80"></el-table-column>
					<el-table-column prop="avatar" label="头像"
						min-width="80">
						<template slot-scope="scope">
								<img :src="url+scope.row.avatar"  style="width: 60px;">
						</template>
						
						</el-table-column>
					<el-table-column prop="nickname" label="姓名"
						min-width="80"></el-table-column>
						<el-table-column prop="username" label="账户"
							min-width="80"></el-table-column>
						<el-table-column prop="product_id_text" label="产品模式"
							min-width="80"></el-table-column>	
					<el-table-column  label="状态操作"  sortabl  width="100" >
						<template slot-scope="scope">
						<el-switch
						  v-model="scope.row.status"
						  active-color="#13ce66"
						  inactive-color="#ff4949"
						  active-value="normal" inactive-value="hidden"
						  @change="switchchange($event,scope.row)"
						   :disabled='scope.row!=1'>
						</el-switch>
						
						</template>
					
					</el-table-column>
				<el-table-column label="操作" min-width="200" >
					<template slot-scope="scope">
						<el-button type="primary" @click="edit(scope.row)">编辑</el-button>
						<el-button type="danger" @click="clear(scope.row)" v-if="scope.row.id!==1">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog :title="form.id?'编辑':'添加'" :visible.sync="dialogVisible" width="60%">
			<span>
				<el-form ref="form" :model="form" :inline="true" label-width="120px">
					<el-row>
					<el-form-item label="头像" >
						<el-upload class="avatar-uploader" :action="url+'back/common/upload'" :show-file-list="false"
							:headers="headers" :on-success="handleAvatarSuccess">
							<img v-if="form.avatar" :src="imgurl+form.avatar" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					</el-row>
					<el-form-item label="角色" :required="true">
						<el-col>
							<el-select v-model="form.group_id" placeholder="请选择"   style="width: 200px;" clearable @change="changeaa">
							   <el-option
							     v-for="item in jueselist"
							     :key="item.id"
							     :label="item.name"
							     :value="item.id"
															 
															  >
							   </el-option>
							 </el-select>
						</el-col>
					</el-form-item>
					<el-form-item label="姓名" :required="true">
						<el-col>
							<el-input v-model="form.nickname" style="width: 200px;"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="用户名" :required="true">
						<el-col>
							<el-input v-model="form.username" style="width: 200px;" placeholder="请输入手机号"></el-input>
						</el-col>
					</el-form-item>

					<el-form-item label="密码" :required="true">
						<el-col>
							<el-input v-model="form.password" style="width: 200px;"></el-input>
						</el-col>
					</el-form-item>
			
					<!-- <el-form-item label="电话">
						<el-col>
							<el-input v-model.number="form.mobile" style="width: 200px;"></el-input>
						</el-col>
					</el-form-item> -->
					<el-form-item label="状态" :required="true">
						<el-col>
							<el-select v-model="form.status" placeholder="请选择" style="width: 200px;" clearable>
								<el-option v-for="item in zhuangtailist" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-col>
					</el-form-item>
					
					<el-form-item label="产品模式" :required="true">
						<el-col>
							<el-select v-model="form.product_id" placeholder="请选择" style="width: 200px;" clearable>
								<el-option v-for="item in productlist" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-col>
					</el-form-item>
				</el-form>


			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
		<div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) ;z-index: 999;">
			<el-popover placement="top" width="160" v-model="visiblea">
				<p>确定删除吗？</p>
				<div style="text-align: right; margin: 0">
					<el-button size="mini" type="text" @click="visiblea = false">取消</el-button>
					<el-button type="primary" size="mini" @click="cleara">确定</el-button>
				</div>
			</el-popover>
		</div>
		<div class="block" style="margin-top: 18px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				:page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

	</div>
</template>

<script>
	import rightbiao from '@/components/rightbiao/rightbiao'
	import setting from '@/config/setting';
	export default {
		components: {
			rightbiao
		},
		data() {
			return {
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				username: '',
				status: '',
				nickname: '',
				collection_id: '',
				group_id: '',
				zhuangtai: '',
				fenleilist:[],
				value1: '',
				jueselist:[],
				zhuangtailist:[
					{ value: 'normal',label: '启用'},
					{ value: 'hidden',label: '禁用'},
				
				],
				
				table_name: '',
				visiblea: false,
				formLabelWidth: '120px',
				form: {},
				dialogVisible: false,
				ziduanlist: '',
				drawer: false,
				page: 1,
				total: 0,
				tableData: [],
				clearid: '',
				showguancang:true,
				productlist:[]

				
				
			}
		},
		mounted() {
			// this.getfenleilist('0')
			this.getjueselist()
			this.getlist();
			this.getproductlist()
		},
		methods: {
			changeaa(e){
				console.log(e)
				if(e==3){
					this.showguancang=false
				}else{
					this.showguancang=true
				}
			},
			switchchange($event,row){
				console.log($event)
				console.log(row) 
				 this.$http.post('/back/auth/admin/status',{id:row.id}).then((res) => {
				 	if (res.data.code == 1) {
				 		this.$message({
				 			message: res.data.msg,
				 			type: 'success'
				 		});
				 		this.getlist();
				 	} else {
				 		this.$message.error(res.data.msg);
				 	}
				 });
				
			},
			handleAvatarSuccess(res) {
				console.log(res)
				this.$set(this.form, 'avatar', res.code.url)
				
			},
			// getfenleilist(id) {
			// 	this.$http.post('/back/readers_type/collection_list',{id}
			// 	 ).then(res => {
			// 		if (res.data.code === 1) {
			// 			this.fenleilist=[] 
			// 			this.fenleilist = res.data.data
			// 			console.log('馆藏地',this.fenleilist)
			// 		} else {
			// 			this.$message.error(res.data.msg || '获取数据失败');
			// 		}
			// 	})
			// },
			getjueselist() {
				this.$http.get('/back/auth/admin/getGroupList'
				 ).then(res => {
					if (res.data.code === 1) {
						this.jueselist=[] 
						this.jueselist = res.data.data
						console.log('角色',this.jueselist)
					} else {
						this.$message.error(res.data.msg || '获取数据失败');
					}
				})
			},
			add() {
				// this.getfenleilist('0')
				this.form = {}
				this.form = {
						group_id: '',
						username: '',
						nickname: '',
						password: '',
						avatar: '',
						status: '',
						
					},
					// this.form.pid=0
					this.dialogVisible = true;
			},
			// getduzheleixing() {
			// 	this.$http.get('/back/data/readersTypeList').then(res => {
			// 		if (res.data.code === 1) {

			// 			this.duzheleiing = res.data.data
			// 			console.log('这是读者类型列表', this.duzheleiing)
			// 		} else {
			// 			this.$message.error(res.data.msg || '获取数据失败');
			// 		}
			// 	})
			// },
			// getbumen() {
			// 	this.$http.get('/back/data/departmentList').then(res => {
			// 		if (res.data.code === 1) {
			// 			this.bumenlist = res.data.data
			// 			console.log('这是部门类型列表', this.bumenlist)
			// 		} else {
			// 			this.$message.error(res.data.msg || '获取数据失败');
			// 		}
			// 	})
			// },
			getyajin() {
				this.$http.get('/back/data/paytypeList').then(res => {
					if (res.data.code === 1) {
						this.yajinlist = res.data.data
						console.log('这是部门类型列表', this.bumenlist)
					} else {
						this.$message.error(res.data.msg || '获取数据失败');
					}
				})
			},
			changea(e) {
				console.log('这是选中的读者', e)
				this.readers_id = e
			},
			changeb(e) {
				console.log('这是选中的读者', e)
				this.department_id = e
			},
			changec(e) {
				if(e){
					this.starttime=e[0]
					this.endtime=e[1]
				}else{
					this.starttime=''
					this.endtime=''
				}
			},
			changed(e) {
				this.status = e
			},
			edit(row) {
				this.form = row;
				this.form.password=''
				console.log(row)
				this.dialogVisible = true;
			},
			clear(row) {
				this.visiblea = true
				console.log('这是要删除的row', row)


				this.clearid = row.id.toString()
			},
			cleara() {
				let id = this.clearid
				this.visiblea = false
				this.$http.post('/back/auth/admin/del', {
					id: id
				}).then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();

					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			submit() {
				console.log(this.form)
				let a = {}
				a = this.form
				console.log('这是要穿的数据', a)
				this.$http.post('/back/auth/admin/edit', a).then((res) => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();
						this.dialogVisible = false;
					} else {
						this.$message.error(res.data.msg);
					}
				});
			},

			deepCopy(newobj, oldobj) {
				let that = this
				// 遍历oldobj的属性名
				for (var k in oldobj) {
					// 判断属性属于哪种数据类型
					// 1.获取属性值 oldobj[k]
					var item = oldobj[k];
					// 2.判断是否属于数组(因为数组也属于对象，所以必须先判断数组)
					if (item instanceof Array) {
						newobj[k] = []; // (1)先给newobj添加一个属性k，同oldobj里的k
						that.deepCopy(newobj[k], item) // (2)再用oldobj[k]赋值给newobj[k]
					} else if (item instanceof Object) {
						// 3.判断是否属于对象
						newobj[k] = {};
						that.deepCopy(newobj[k], item)
					} else {
						// 4.属于简单数据类型
						newobj[k] = item
					}

				}
			},
			xuanzebiao(list) {
				let a = []
				this.deepCopy(a, list)
				for (let item of a) {
					if (item.status == true) {
						item.status = 'true'
					} else {
						item.status = 'false'
					}
				}

				this.$http.post('/back/Fieldset/edit', {
					list: a
				}).then((res) => {
					if (res.data.code == 1) {
						this.page = 1;
						this.getlist();
						this.drawer = false
					}
				});
			},

			// getziduanlist() {
			// 	this.$http.get(`/back/Fieldset/list?tb_name=${this.table_name}`).then((res) => {
			// 		this.ziduanlist = res.data.data;
			// 		console.log('这是字段列表', this.ziduanlist)
			// 	});
			// },
			//查询条件
			search() {
				this.page = 1;
				this.getlist();
			},
			//获取列表
			getlist() {
				this.$http.get(
					`/back/auth/admin/list?page=${this.page}&size=10&username=${this.username}&nickname=${this.nickname}&group_id=${this.group_id}`
				).then(res => {
					if (res.data.code === 1) {
						this.tableData = res.data.data;
						console.log('1212', this.tableData)
						this.total = this.tableData.total;
					
						// this.getziduanlist()
					} else {
						this.$message.error(res.data.msg || '获取数据失败');
					}
				})
			},
			// 获得产品列表
			getproductlist(){
				this.$http.get('/back/auth/admin/productlist').then(res => {
					console.log(res.data)
					this.productlist = res.data.data
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val;
				this.getlist();
			},
		},

	}
</script>

<style lang="scss">
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 200px;
		height: 200px;
		line-height: 200px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.daohang {
		padding: 10px 0;
		display: flex;
		align-items: center;
		color: black;

		.title {
			font-size: 16px;
			font-weight: bold;
		}

	}

	.top-btn {
		padding: 20px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.top-con {
			display: flex;
			align-items: center;

			.con-item {
				margin-right: 10px;
			}
		}

	}

	.top-con {
		display: flex;
		align-items: center;

		.con-item {
			margin-right: 10px;
		}
	}
</style>